<template>
  <div id="searchPicturePage" class="container">
    <!-- 页面标题 -->
    <h2 class="page-title">视觉搜索分析</h2>

    <!-- 原图区域 -->
    <div class="original-section">
      <h3 class="section-title">原始图像</h3>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-card
            class="original-card"
            :body-style="{ padding: 0 }"
            :loading="loading"
          >
            <template #cover>
              <a-spin :spinning="loading">
                <img
                  class="original-image"
                  :src="picture.thumbnailUrl || picture.url"
                  @error="handleImageError"
                />
              </a-spin>
            </template>
            <a-card-meta :title="picture.name" style="padding: 16px">
              <template #description>
                <div class="meta-description">
                  <span>上传时间：{{ picture.createTime }}</span>
                  <span>文件大小：{{ picture.picSize }}</span>
                </div>
              </template>
            </a-card-meta>

          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 搜索结果区域 -->
    <div class="results-section">
      <h3 class="section-title">识图结果</h3>
      <div class="results-container">
        <a-spin :spinning="loadingResults">
          <a-list
            :grid="gridConfig"
            :data-source="dataList"
            class="result-list"
          >
            <template #renderItem="{ item }">
              <a-list-item>
                <a-card
                  class="result-card"
                  hoverable
                  @click="handleImageClick(item)"
                >
                  <template #cover>
                    <img
                      class="result-image"
                      :src="item.imgUrl"
                      @error="handleImageError"
                    />
                  </template>
                  <a-card-meta :title="item.title">
                    <template #description>
                      <div class="meta-description">
                        <span>相似度：{{ item.similarity }}%</span>
                        <span>来源：{{ item.source }}</span>
                      </div>
                    </template>
                  </a-card-meta>
                </a-card>
              </a-list-item>
            </template>
          </a-list>
        </a-spin>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getPictureVoByIdUsingGet, searchPictureByPictureUsingPost } from '@/api/pictureController'
import { message } from 'ant-design-vue'

const route = useRoute()
const pictureId = computed(() => route.query?.pictureId)
const picture = ref<API.PictureVO>({})
const dataList = ref<API.ImageSearchResult[]>([])
const loading = ref<boolean>(false)
const loadingResults = ref<boolean>(false)

// 获取原图信息
const getOldPicture = async () => {
  loading.value = true
  try {
    const res = await getPictureVoByIdUsingGet({ id: pictureId.value })
    if (res.data.code === 0) {
      picture.value = res.data.data
    } else {
      message.error(`获取原图失败：${res.data.message}`)
    }
  } finally {
    loading.value = false
  }
}

// 获取搜索结果
const fetchData = async () => {
  loadingResults.value = true
  try {
    const res = await searchPictureByPictureUsingPost({ pictureId: pictureId.value })
    if (res.data.code === 0) {
      dataList.value = res.data.data ?? []
    } else {
      message.error(`搜索失败：${res.data.message}`)
    }
  } finally {
    loadingResults.value = false
  }
}

onMounted(() => {
  getOldPicture()
  fetchData()
})

// 图片点击处理
const handleImageClick = (item: API.ImageSearchResult) => {
  window.open(item.imgUrl, '_blank')
}

// 图片加载失败处理
const handleImageError = (e: Event) => {
  const imgElement = e.target as HTMLImageElement
  imgElement.src = '/placeholder-image.png'
}

// 响应式布局配置
const gridConfig = computed(() => ({
  gutter: 16,
  xs: 1,
  sm: 2,
  md: 3,
  lg: 4,
  xl: 5,
  xxl: 6
}))
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}

.page-title {
  font-size: 28px;
  color: #1890ff;
  margin: 24px 0;
}

.section-title {
  font-size: 20px;
  color: #1a1a1a;
  margin: 32px 0 16px;
}

.original-section {
  margin-bottom: 48px;
}

.original-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .original-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 4px;
  }

  .ant-card-meta {
    background: #f5f5f5;
    padding: 16px;
    border-top: 1px solid #e8e8e8;
  }

  .meta-description {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
  }
}

.results-section {
  .results-container {
    padding: 0 16px;
  }

  .result-list {
    .result-card {
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .result-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 4px;
      }

      .ant-card-head {
        padding: 12px;
      }

      .ant-card-body {
        padding: 12px;
      }

      .meta-description {
        color: #666;
        font-size: 13px;
      }
    }
  }
}

/* 自定义样式 */
.ant-spin-nested-loading {
  height: 100%;
}

.ant-list-item {
  margin-bottom: 16px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .original-image {
    height: 200px;
  }

  .result-image {
    height: 150px;
  }
}
</style>
